import React, { Component } from "react";
/* 1.connect 创建容器组件，链接容器组件和ui组件
   2.connect 提供订阅功能，无需再subscribe。
*/
import { connect } from "react-redux";
// 引入action
import { increment, decrement } from "./action";

// const mapStateToProps = (state) => ({ num: state.num });
/*  1.mapDispatchToProps 返回对象形式
    2.mapDispatchToProps 提供dispatch参数
    3.mapDispatchToProps 可以简写
*/
// const mapDispatchToProps = (dispatch) => {
//   return { add: () => dispatch(increment()), sub: () => dispatch(decrement()) };
// };
class App extends Component {
  state = {};
  // componentDidMount() {
  //   subscribe(() => this.setState({}));
  // }

  // increment = () => {
  //   this.props.add();
  // };
  // decrement = () => {
  //   this.props.sub();
  // };

  render() {
    return (
      <>
        <button onClick={this.props.sub}>-</button>
        &nbsp;<span>{this.props.num}</span>&nbsp;
        <button onClick={this.props.add}>+</button>
      </>
    );
  }
}

export default connect((state) => ({ num: state.num }), {
  add: increment,
  sub: decrement,
})(App);
